<template>
  <div :class="`bar-height-layout ${$store.state.topClass || ''}`" :style="cssVars">
    <div class="bar-placeholder"></div>
    <div class="page-container">
      <Nuxt />
    </div>
    <div class="page-footer">鄂ICP备2023027803号</div>
  </div>
</template>

<script>
export default {
  name: 'BarHeightLayout',
  computed: {
    // css 变量，可以在 style 标签中使用
    cssVars() {
      return {
        '--bar-height': `${this.$store.state.barHeight}px`,
      };
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.bar-height-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  .bar-placeholder {
    height: var(--bar-height);
  }
  .page-container {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }
  ::v-deep .van-nav-bar--fixed {
    position: fixed;
    top: var(--bar-height);
  }

  .page-footer {
    background: #333;
    color: #999;
    text-align: center;
    padding: 10px 0;
  }
}
</style>
